<template>
  <view>
    <!-- 显示内容，如果用户可以访问该功能 -->
    <view v-if="canAccess">
      <slot></slot>
    </view>
    
    <!-- 提示升级，根据不同情况显示不同内容 -->
    <view v-else class="upgrade-container">
      <view class="upgrade-content">
        <image class="lock-icon" :src="featureIcon"></image>
        <view class="upgrade-title">{{ title }}</view>
        <view class="upgrade-desc">{{ description }}</view>
        <view class="privacy-note" v-if="privacyNote">
          <text>{{ privacyNote }}</text>
        </view>
        
        <!-- 游客模式下显示登录按钮 -->
        <button v-if="isGuestMode" class="upgrade-button" @tap="handleLogin">立即登录</button>
        
        <!-- 需要授权的情况 -->
        <button v-else-if="requiresAuth" class="auth-button" @tap="requestAuth">授权使用</button>
        
        <!-- 需要会员的情况 -->
        <button v-else-if="requiresVip" class="vip-button" @tap="goToMembership">开通会员</button>
        
        <!-- 默认按钮 -->
        <button v-else class="upgrade-button" @tap="handleLogin">立即登录</button>
        
        <view class="cancel-text" @tap="handleCancel">{{ cancelText }}</view>
      </view>
    </view>
    
    <!-- 授权说明弹窗 -->
    <uni-popup ref="authPopup" type="center">
      <view class="auth-popup-content">
        <view class="popup-title">{{ authTitle || '授权说明' }}</view>
        <view class="popup-desc">
          <text>{{ authDescription || `使用${title}功能需要获取以下权限：` }}</text>
          <text class="auth-item" v-for="(item, index) in authItems" :key="index">• {{ item }}</text>
        </view>
        <view class="privacy-note" v-if="authPrivacyNote">
          <text>{{ authPrivacyNote }}</text>
        </view>
        <view class="popup-buttons">
          <button class="cancel-btn" @tap="closeAuthPopup">取消</button>
          <button class="confirm-btn" @tap="confirmAuth">授权</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useUserStore } from '@/stores'

// 接收属性
const props = defineProps({
  // 功能名称，必须与UserStore中定义的限制功能名称一致
  feature: {
    type: String,
    required: true
  },
  // 功能图标
  featureIcon: {
    type: String,
    default: '/static/images/icons/lock.png'
  },
  // 功能标题
  title: {
    type: String,
    default: '需要登录账号'
  },
  // 功能描述
  description: {
    type: String,
    default: '此功能仅限登录用户使用'
  },
  // 隐私说明
  privacyNote: {
    type: String,
    default: '我们重视您的隐私，只会在必要时请求权限'
  },
  // 取消按钮文本
  cancelText: {
    type: String,
    default: '暂不登录'
  },
  // 是否需要授权
  requiresAuth: {
    type: Boolean,
    default: false
  },
  // 是否需要会员
  requiresVip: {
    type: Boolean,
    default: false
  },
  // 授权弹窗标题
  authTitle: {
    type: String,
    default: ''
  },
  // 授权弹窗描述
  authDescription: {
    type: String,
    default: ''
  },
  // 授权项目列表
  authItems: {
    type: Array,
    default: () => []
  },
  // 授权弹窗隐私说明
  authPrivacyNote: {
    type: String,
    default: '我们将严格按照隐私政策保护您的个人信息'
  }
})

const emit = defineEmits(['auth', 'cancel', 'login'])

const userStore = useUserStore()
const authPopup = ref(null)

// 判断当前用户是否可以访问该功能
const canAccess = computed(() => {
  // 如果需要会员，检查用户是否是会员
  if (props.requiresVip && !userStore.isVip) {
    return false
  }
  
  return userStore.canUseFeature(props.feature)
})

// 判断是否是游客模式
const isGuestMode = computed(() => {
  return userStore.isGuestMode
})

// 处理登录跳转
const handleLogin = () => {
  uni.navigateTo({
    url: '/pages/login/account-login'
  })
  emit('login')
}

// 跳转到会员中心
const goToMembership = () => {
  uni.navigateTo({
    url: '/pages/membership/membership'
  })
}

// 请求授权
const requestAuth = () => {
  // 打开授权弹窗
  authPopup.value.open('center')
}

// 关闭授权弹窗
const closeAuthPopup = () => {
  authPopup.value.close()
  emit('cancel')
}

// 确认授权
const confirmAuth = () => {
  // 关闭弹窗
  authPopup.value.close()
  
  // 触发授权事件，由父组件处理具体的授权逻辑
  emit('auth', props.feature)
}

// 处理取消
const handleCancel = () => {
  emit('cancel')
  uni.navigateBack()
}
</script>

<style lang="scss">
.upgrade-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  
  .upgrade-content {
    width: 80%;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 60rpx 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .lock-icon {
      width: 120rpx;
      height: 120rpx;
      margin-bottom: 30rpx;
    }
    
    .upgrade-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .upgrade-desc {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 20rpx;
      text-align: center;
    }
    
    .privacy-note {
      font-size: 24rpx;
      color: #999;
      text-align: center;
      margin-bottom: 30rpx;
      padding: 0 20rpx;
    }
    
    .upgrade-button {
      width: 80%;
      height: 90rpx;
      line-height: 90rpx;
      background: #5677fc;
      color: #fff;
      font-size: 32rpx;
      border-radius: 50rpx;
      margin-bottom: 20rpx;
    }
    
    .auth-button {
      width: 80%;
      height: 90rpx;
      line-height: 90rpx;
      background: #5677fc;
      color: #fff;
      border-radius: 45rpx;
      font-size: 28rpx;
      margin-bottom: 20rpx;
    }
    
    .vip-button {
      width: 80%;
      height: 90rpx;
      line-height: 90rpx;
      background: linear-gradient(to right, #FFD700, #FFA500);
      color: #fff;
      border-radius: 45rpx;
      font-size: 28rpx;
      margin-bottom: 20rpx;
    }
    
    .cancel-text {
      font-size: 28rpx;
      color: #999;
      padding: 20rpx;
    }
  }
  
  // 授权弹窗样式
  .auth-popup-content {
    width: 600rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 40rpx 30rpx;
    box-sizing: border-box;
    
    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
      margin-bottom: 30rpx;
      color: #333;
    }
    
    .popup-desc {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 30rpx;
      display: flex;
      flex-direction: column;
      
      .auth-item {
        margin-top: 10rpx;
        color: #333;
      }
    }
    
    .privacy-note {
      font-size: 24rpx;
      color: #999;
      text-align: center;
      margin-bottom: 30rpx;
    }
    
    .popup-buttons {
      display: flex;
      justify-content: space-between;
      
      button {
        width: 45%;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 28rpx;
        border-radius: 40rpx;
      }
      
      .cancel-btn {
        background-color: #f5f5f5;
        color: #666;
      }
      
      .confirm-btn {
        background-color: var(--primary-color);
        color: #fff;
      }
    }
  }
}
</style>